<template>
<!--  <div>
    <van-grid :gutter="10">
      <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
    </van-grid>
  </div>-->
  <div>
    <div>
      <van-row >
        <van-col span="8" style="line-height: 50px;"><van-icon name="manager-o" /></van-col>
        <!--搜索框-->
        <van-col span="8"><van-search v-model="value" placeholder="搜索" /></van-col>
        <van-col span="8" style="line-height: 50px;">搜索</van-col>
      </van-row>

    </div>


    <!--轮播图-->
    <van-swipe :autoplay="2000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" width="100%" height="250" />
      </van-swipe-item>
    </van-swipe>

    <!--通知栏-->
    <van-notice-bar
        left-icon="volume-o"
        scrollable
        text="关于2022年深化纠正'四风'和作风纪律专项活动。"
    />
    <van-tabbar v-model="active" @change="onChange" route>
      <van-tabbar-item icon="home-o" name="基层党建" replace to="/a1">基层党建</van-tabbar-item>

      <van-tabbar-item icon="search" name="教育培训" replace to="a2">教育培训</van-tabbar-item>

      <van-tabbar-item icon="friends-o" name="首页" replace to="/">首页</van-tabbar-item>

      <van-tabbar-item icon="setting-o" name="意识形态" replace to="/a4">意识形态</van-tabbar-item>

      <van-tabbar-item icon="search" name="群团天地" replace to="/a5">群团天地</van-tabbar-item>
    </van-tabbar>

    <van-tabs>
      <van-tab title="党员教育">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
          <!--      <van-cell v-for="memberEducation in list" :key="memberEducation.id" :title="memberEducation.tittle" />-->
          <div v-for="item in list" style="border:1px solid gray  ;height: 100px;" @click="toInfo(item.id)">
            <div style="float: left;" v-if="item.newsImagepath!=''">
              <img :src="item.newsImagepath" alt="" style="width:100px ; height:90px ;" >
            </div>
            <div>
              <span style="line-height: 40px; font-family: 微软雅黑;">{{item.tittle}}</span>
            </div>
            <div style="">
              <span style="font-size: 10px; position: absolute; right: 20px;">来源:{{item.departmentName}}</span>
            </div>
            <span style="font-size: 10px;">{{item.releaseTime}}</span>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="职工教育">
        职工教育
      </van-tab>
      <van-tab title="人才培育">
        人才培育
      </van-tab>
      <van-tab title="每日答题">
        <template>
          <div class="second">
            <div class="dati">
              <div v-for="(question, index) in questionList" :key="question.questionId" >
                <div class="test-content" v-if="index == page">
                  <!--题号+题目-->
                  <div class="content-title">{{ index + 1 }}.{{ question.questionContent }}</div>
                  <!--四个选项-->
                  <van-radio-group v-model="radio">
                    <van-radio :name="question.optionA " class="text-x">A&ensp;{{
                        question.optionA
                      }}</van-radio>
                    <van-radio :name="question.optionB " class="text-x">B&ensp;{{
                        question.optionB
                      }}</van-radio>
                    <van-radio :name="question.optionC " class="text-x">C&ensp;{{
                        question.optionC
                      }}</van-radio>
                    <van-radio :name="question.optionD " class="text-x">D&ensp;{{
                        question.optionD
                      }}</van-radio>

                  </van-radio-group>
                  <!--进入下一题-->
                  <div class="btn">

                    <div
                        class="next"
                        @click="toNext(index, question.questionId)"
                        v-if="isShow"
                        :class="index == 0 ? 'next' : 'before-next'"

                    >
                      <span class="spa">下一题</span>
                    </div>

                    <!-- 提交 -->
                    <div
                        class="tijiao"
                        v-if="!isShow"
                        @click="submit(question,question.questionId)"
                        :class="index == 0 ? 'next' : 'before-next'"
                    >
                      <span class="spa"> 完成答题</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import {Notify} from "vant";

export default {
  name: "education",
  data() {
    return {
      list: [],
      active:'',
      value :"",
      loading: false,
      finished: false,
      images: [
        'http://rhs5roj8q.hb-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202022-09-23%20163919.png',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
      ],
      questionList:[],
      page:0,
      radio: "",
      isShow:true,
      score:0,
      ids:[],
      questionInfos:[],
      question:{
        questionId:'',
        questionType:'',
        questionContent:'',
        optionA:'',
        optionB:'',
        optionC:'',
        optionD:'',
        answer:'',
      }
    };
  },
  methods: {
    onChange(name) {
      Notify({ type: 'primary', message: name });
    },
    onLoad(){
      // 异步更新数据
      setTimeout(() => {
        this.$axios.post("http://localhost:7000/education/findAll").then(res => {
          this.list = res.data.data;
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          this.finished = true;
        });
      }, 1000);
    },
    toInfo(id){
      this.$router.push({ name: "education_info", params: { id: id } });
    },
    getQuestion(){
      this.$axios.post("http://localhost:7000/questionDay/randomFive").then(res => {
        this.questionList=res.data.data;
      })
    },
    toNext(index,id){
      // 1. 判断是否答题，没有则无法跳转到下一题
      if(index === 0) {
        if((this.radio.slice(0,1) === '' || this.radio.slice(0,1) === undefined)) {
          return;
        }
      }
      // 2. 保存答题数据
      let question = { ids: this.radio.slice(0)};
      this.questionInfos[index] = question;
      console.log(this.questionList[index].answer)
      //每一道题10分，得到选项后判断与后端传来的答案是否一致。一致+10分，不一致不加分
      if (this.questionInfos[index].ids==this.questionList[index].answer) {
        console.log(this.questionList[index].answer)
        this.score=this.score+10;
        console.log(this.score);
        alert("回答正确")
      }else{
        this.score=this.score+0;
        console.log(this.score);
        alert("答案错误,正确答案为"+this.questionList[index].answer)
      }
      index++;
      this.page++;
      // 当前页等于最后一题 下一题按钮隐藏
      if (this.page == this.questionList.length - 1) {
        return (this.isShow = false);
      } else {
        return (this.isShow = true);
      }
    },
    submit(n){
      this.ids.push(this.radio.slice(2))
      let finalScore = this.score+10
      alert("回答正确")
      alert("答题成功,积分加"+finalScore)

    }
  },
  mounted() {
    this.getQuestion();
  },
};
</script>

<style scoped>

</style>